<template>
  <el-form label-position="top" :model="form" :rules="rules" ref="form">
    <el-form-item :label="`${$t('common.fields.partName.displayName')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.name" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.part.partNo')}:`" >
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.serialNumber" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartType')}:`" >
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.type" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartStandard')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.standard" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.part.explain')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.description" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.ralationProductType')}:`" v-if="initData.openSuperCodePro">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&getProductData(formdata.productTypeList)" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('part.field7')}:`">
      <el-input type="text" :value="formdata.repertory&&formdata.repertory.name" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('part.field8')}:`" >
      <el-select v-model="form.toRepertory" @change="changeRepertory">
         <el-option v-for="item in repertory" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="needApproval" class="form-tips-item">
      <div class="need-approval" v-html="needApproval"></div>
    </el-form-item>
    <el-form-item :label="`${$t('part.field9')}:`"  style="position: relative">
      <el-input type="text" zzplaceholder="" :value="formdata.repertoryCount" readonly></el-input>
      <!--<el-tooltip class="item" effect="dark" :content="`安全库存：${formdata.safetyStock}`" placement="top">-->
        <el-tag v-if="formdata.safetyStock && (formdata.safetyStock > formdata.repertoryCount)" size="mini" type="danger" class="tag-position">{{ $t('part.components.partStock.text2') }}</el-tag>
      <!--</el-tooltip>-->
      <el-tooltip v-if="formdata.safetyStock" class="item" effect="dark" :content="`${$t('part.text9')}：${formdata.safetyStock || 0}`" placement="top">
        <div class="tag-position shadow"></div>
      </el-tooltip>
    </el-form-item>

    <el-form-item :label="`${$t('part.field10')}:`" prop="number">
       <el-input v-model="form.number" type="number" step="any" :min="0" :max="formdata.repertoryCount"></el-input>
    </el-form-item>
     <el-form-item :label="`${$t('common.base.operationType')}:`" >
       <el-input type="text" v-model="form.type" readonly></el-input>
    </el-form-item>
     <!-- <el-form-item label="备注:">
      <el-input type="textarea" placeholder="请输入备注内容 [最多500字]" :autosize="{ minRows: 2, maxRows: 5}" v-model="form.content"></el-input>
    </el-form-item> -->

    <el-form-item :label="`${$t('common.form.type.remark')}:`" prop="remark">
      <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :maxlength="500"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { isOpenData } from '@src/util/platform';
import MathUtil from '@src/util/math';
import { getRootWindow } from '@src/util/dom'
import { t } from '@src/locales'
const rootWindow = getRootWindow(window)
export default {
  name: 'part-allocation-form',
  inject: ['initData'],
  data(){
    const _that = this;
    return {
      isOpenData,
      formdata: {},
      sparepartConfig: {},
      repertory: [],
      userId: '',
      needApproval: '',

      form: {
        type: '调拨',
        content: '',
        toRepertory: '',
        remark: '',
        number: 1
      },
      // numberValidateForm: {
      //   number: ''
      // },
      rules: {
        remark: [
          {required: true, message: t('common.base.tip.inputCommentContent')},
          {max: 500, message: t('part.components.partRemarkForm.text2', {max:500})}
        ],
        number:[
          {
            validator(rule, value, callback) {
              const val = Number(value);
              const count = _that.decimalNumber(val);
              if (value == '' || val < 0) {
                callback(new Error(t('part.tips22')))
              } else if(_that.formdata.repertoryCount < val){
                callback(new Error(t('part.tips23')))
              } else if (count != -1 && count == 0) {
                callback(new Error(t('part.tips23', {num:0})));
              } else if (count != -1 && count != 0) {
                callback(new Error(t('part.tips24', {num1:0, num2:count})))
              } else{
                callback();
              }
            },
            trigger: 'change',
          }
        ],
      }
    }
  },
  computed:{
    // TODO: 支持小数 提示
    minVariation () {
      let initData = this.initData;
      return !initData || !initData.precision ? 1 : (initData.precision == 1 ? 0.1 : 0.01);
    },
    _inStoreType(){
      return this.sparepartConfig.inStoreType || []
    }
  },
  methods: {
    getProductData(value) {
      if(value) return value.map(i => (i && i.catalogName) || '').join('，')
    },
    changeRepertory(val) {
      const targetId = val;
      if (!targetId || targetId && !this.repertory.filter(r => r.id === targetId).length) return this.needApproval = '';
      const targetRepertory = this.repertory.filter(r => r.id === targetId)[0] || {};
      const managers = targetRepertory.manager || [];
      if (managers.some(m => m.userId === this.userId)) return this.needApproval = '';
      if(this.isOpenData) {
        this.needApproval = `${t('common.base.need')}<span>${managers.map(m =>`${`<ww-open-data type="userName" openid="${m.staffId}"></ww-open-data>`}`).slice(0, 3)}</span>${t('part.tips26')}`;
      } else {
        this.needApproval = `${t('common.base.need')}<span>${managers.map(m => m.displayName).slice(0, 3).join('，')}</span>${t('part.tips26')}`;
      }
      this.$nextTick(()=>{
        if(rootWindow.WWOpenData) {
          rootWindow.WWOpenData.bindAll(document.querySelectorAll('ww-open-data'));
        }
      }) 
    },
    async pack(){

      try {
        let isSucc = await this.$refs.form.validate();
        if(isSucc){
          let number = this.form.number
          if(number < this.minVariation){
            this.$platform.alert(t('part.tips27', {num:this.minVariation}))
            return
          }
          if(this.formdata.repertoryCount < number){
            this.$platform.alert(t('part.tips28'))
            return
          }
          if(!this.form.toRepertory){
            this.$platform.alert(t('part.tips29'))
            return ;
          } 

          return {
            repertoryId: this.formdata.repertory.id,
            targetId: this.form.toRepertory,
            sparepartId: this.formdata.sparepart.id,
            variation : Number(number),
            remark: this.form.remark
          }
        }
      } catch (error) {
        console.log(error)
      }

      return null;
    },
    selectOutType(ele){
      let type = ele.target.value;
      this.type = type;
    },
    init(formdata, repertory, sparepartConfig, userId){

      this.formdata = formdata;
      this.repertory = repertory.filter(item => item.id != formdata.repertory.id);
      this.sparepartConfig = sparepartConfig;
      this.userId = userId;

      if(this.repertory.length > 0){
        this.form.toRepertory = this.repertory[0].id;
        this.changeRepertory(this.form.toRepertory);
      }
    },
    decimalNumber(num) {
      let initData = this.initData;
      let count = MathUtil.decimalNumber(num);
      let isPartV2 = initData.isSparepart2;

      if(!isPartV2 && count != 0) return 0;
      if(initData.precision >= count) return -1;
      return initData.precision;
    }
  }
}
</script>

<style lang="scss">
.el-form-item{
  margin-bottom: 0
}
.el-form-item__error{
  position: relative;
}

.need-approval {
  color: #666;
  font-size: 12px;
  span {
    color: #f56c6c;
  }
}

.tag-position {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.shadow {
  width: 60px;
  height: 20px;
}

#outType{
  width: 100%;
  height: 34px;
}
</style>